import mCommon from '@/components/mCommon/index';
import { getMyList } from '@/services/myApi';
import { Button, Space } from 'antd';
import styles from './index.less';
const Btns = [
  <Button key="1" type="primary">
    新建
  </Button>,
];
const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    render: (text) => <a>{text + '2'}</a>,
  },
  {
    title: '昵称',
    dataIndex: 'nickName',
    key: 'nickName',
  },
  {
    title: '性别',
    key: 'gender',
    dataIndex: 'gender',
  },
  {
    title: '操作',
    dataIndex: 'option',
    valueType: 'option',
    render: (_, record) => (
      <Space size="middle">
        <a onClick={_edit(record)}>编辑</a>
        <a>删除</a>
      </Space>
    ),
  },
];
const _edit = (row) => {
  console.log('row', row);
};

const handleRemove = (list) => {
  console.log('list', list);
};
const HomePage = () => {
  return (
    <div className={styles.container}>
      <mCommon.ProTable
        requestFn={getMyList}
        columns={columns}
        centerRightSlot={Btns}
        headerOpt={{
          title: '',
        }}
        extraEl={(rowSelect) => (
          <div>
            已选择 <a style={{ fontWeight: 600 }}>{rowSelect.length}</a>{' '}
            项&nbsp;&nbsp;
          </div>
        )}
        FooterToolbarEl={(rowSelect) => (
          <>
            <Button onClick={handleRemove(rowSelect)}>批量删除</Button>
            <Button type="primary">批量审批</Button>
          </>
        )}
      />
    </div>
  );
};

export default HomePage;
